<template>
    <van-field v-model="localValue"
               class="phone-field"
               name="phone" label="中国+86" placeholder="请输入手机号" center
               :rules="[{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: '手机号格式不正确' }]"/>
</template>

<script>
  import { Field } from "vant"

  export default {
    name: "PhoneField",
    components: {
      [Field.name]: Field,
    },
    model: {
      prop: "value",
      event: "change",
    },
    props: {
      value: String,
    },
    computed: {
      localValue: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit("change", value)
        },
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .phone-field {

        ::v-deep .van-field__label {
            margin: 0;
            position: relative;

            &:after {
                content: ' ';
                position: absolute;
                bottom: 0;
                top: 4px;
                background: $gray-4;
                width: 2px;
                height: 14px;
                transform: scaleX(0.5);
                transform-origin: 0 0;
                margin: 0 10px;
            }
        }
    }
</style>
